<template>
  <view class="content">
    <view>
      <u-navbar :safeAreaInsetTop="false" title="用户信息" :fixed="false" left-text="返回首页" rightIconColor="#13D069"
                leftIconColor="#13D069" @leftClick="toIndex">
        <view slot="right">
          <u-icon name="question-circle" color="#13D069 " label="遇到问题" labelPos="left" labelColor="#13D069">
          </u-icon>

        </view>
      </u-navbar>
    </view>
    <u-modal :show="show" title="用户信息收集说明" confirmText="立即前往" confirmColor="#13D069" cancelColor="cancelColor"
             closeOnClickOverlay @confirm="confirm1" @cancel="cancel" @close="close">

      <view class="slot-content" style="text-align: left;">
        <view style="font-weight: 800;font-size: 31rpx;color: #3D3D3D;">
          欢迎使用新苗同学！
        </view>
        <view style="font-weight: 500;font-size: 21rpx;color: #999999;margin-top: 14rpx;">
          <view> 1.在完成用户信息完善之前，请确保能够正常登录系统完成一些基础操作（正常操作是指账号正常激活，且账号的基础信息已经确认无误与本人相符）。 </view>
          <view> 2.激活过程中建议您设置的密码强度至少包含大小写字母、数字、特殊字符其中三种，以保护您的账号不被轻易攻击。</view>
          <view> 3.激活过程中您所填写的信息都会作为您使用这个APP的基础信息，所以请您认真填写，后期将无法轻易改动。 </view>
          <view>4.严禁将账号密码转借给他人，由此造成的封号、资产流失、系统异常等后果一切由您本人承担。 </view>
          <view> 5.若信息填写过程中遇到任何问题，请与主管老师及时联系。</view>
        </view>
      </view>
      <u-button slot="confirmButton" text="我已阅读并同意上述内容" type="success" shape="circle"
                @click="show = false"></u-button>
    </u-modal>

    <u-modal :content="content" :show="show2" showCancelButton closeOnClickOverlay @confirm="confirm"
             @cancel="cancel2" @close="close2"></u-modal>


    <u--form labelPosition="left" :model="personal" :rules="rules" ref="personal">
      <view></view>
      <view class="box1">
        <view class="box1top">
          <view class="tytext">
            <text class="tl">第一步:<text class="tr">完善账号信息</text></text>
          </view>

        </view>
        <view class="box1bottom">
          <u-form-item label="设置密码" :required="true" prop="userPassword" label-width="150rpx" class="zuoce">
            <u--input v-model="personal.userPassword" password="true" prefixIcon="lock-fill"
                      :customStyle="aa" placeholder="请输入你的密码"
                      prefixIconStyle=" font-size: 30rpx;width:'17rpx';height:'17rpx'" />
          </u-form-item>
          <u-form-item label="重复密码" :required="true" prop="xuserPassword" label-width="150rpx" class="zuoce">
            <u--input v-model="personal.xuserPassword" password="true" prefixIcon="lock-fill"
                      :customStyle="aa" placeholder="请重复你的密码"
                      prefixIconStyle="font-size: 30rpx;width:'17rpx';height:'17rpx'" />
          </u-form-item>
        </view>
      </view>
      <view class="box1">
        <view class="box1top">
          <view class="tytext">
            <text class="tl">第二步:<text class="tr">确认账号信息</text></text>
          </view>

        </view>
        <view class="box1bottom">
          <u-button :customStyle="quer" text="点击当前区域确认账号信息"></u-button>

          <u-form-item label="验证当前状态" :required="true" label-width="450rpx" class="zuoce">
            <view> <u-icon name="error" color="#999999" size="28"></u-icon></view> <text
              style="color: #999999;">未验证</text>
          </u-form-item>

        </view>

      </view>
      <view class="box1">
        <view class="box1top">
          <view class="tytext">
            <text class="tl">第三步:<text class="tr">确认账号信息</text></text>
          </view>

        </view>
        <view class="box1bottom">
          <view class="updatetp">
            <view class="yc">
              <u-form-item label="上传近期一寸免冠照" labelAlign="center" style="margin: 0 auto;" :required="true"
                           label-width="auto">

              </u-form-item>
              <view style="margin: 0 auto;">
                <u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6"
                          multiple :maxCount="1">
                  <slot>

                    <view class="aa1" style="	width:193rpx;height:243rpx;">
                      <view class="aa1-icon"><u-icon name="plus" color="#13D069" size="25" bold
                                                     class="aa1-icon-icon1"></u-icon></view>
                      <view class="aa1-text">请选择一张一寸照片,大小不得超过2MB</view>
                    </view>

                  </slot>
                </u-upload>
              </view>
            </view>

            <view class="tx">
              <u-form-item label="上传你在平台中的头像" labelAlign="center" style="margin: 0 auto;" :required="true"
                           label-width="auto">

              </u-form-item>
              <view style="margin: 0 auto;">
                <u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6"
                          multiple :maxCount="1">
                  <slot>
                    <view class="aa1" style="width:243rpx;height:243rpx;">
                      <view class="aa1-icon">
                        <u-icon
                            name="plus"
                            color="#13D069"
                            size="25" bold
                            class="aa1-icon-icon2"
                        ></u-icon>
                      </view>
                      <view class="aa1-text">请选择一张比例为1:1的照片,大小不得超过2MB</view>
                    </view>
                  </slot>
                </u-upload>
              </view>
            </view>

          </view>

        </view>

      </view>
      <view class="box1">
        <view class="box1top">
          <view class="tytext">
            <text class="tl">第四步:<text class="tr">完善其他信息</text></text>
          </view>

        </view>
        <view class="box1bottom">


          <u-form-item label="设置昵称" :required="true" prop="userAccount" label-width="150rpx" class="zuoce">
            <u--input v-model="personal.userAccount" prefixIcon="account-fill" :customStyle="aa"
                      placeholder="请输入你的昵称" prefixIconStyle="font-size: 30rpx;width:'17rpx';height:'17rpx'" />
          </u-form-item>
          <u-form-item label="邮箱号码" :required="true" prop="email" label-width="150rpx" class="zuoce">
            <u--input v-model="personal.email" prefixIcon="email-fill" :customStyle="aa"
                      placeholder="请输入你的邮箱" prefixIconStyle="font-size: 30rpx;width:'17rpx';height:'17rpx'" />
          </u-form-item>


        </view>

      </view>
    </u--form>
    <u-button :customStyle="quer2" text="确定信息填写无误,提交信息" @click="show2=true"></u-button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show2: false,
      show: false,
      personal: {
        userPassword: '',
        xuserPassword: '',
        userAccount: '',
        email: ""
      },
      fileList1: [],
      fileList6: [],
      quer: {
        width: "627rpx",
        height: "68rpx",
        color: "#13D069",
        background: "#EFEFEF",
        margin: "38rpx auto ",
        borderRadius: "14rpx"
      },
      quer2: {
        width: "627rpx",
        height: "68rpx",
        color: "white",
        background: "#13D069",
        margin: "38rpx auto ",
        borderRadius: "30rpx"
      },
      lb: {
        fontSize: "21rpx"
      },
      a1: {

      },
      rules: {
        'userAccount': {
          type: 'number',
          required: true,
          len: 12,
          message: '请填写12位的账号',
          trigger: ['blur', 'change']
        },
        'userPassword': {
          type: 'string',
          required: true,
          max: 30,
          message: '请填写密码',
          trigger: ['blur', 'change']
        },
      },
      aa: {
        background: "#EFEFEF",
        color: "#999999",
        marginRight: "28rpx",
        borderRadius: "14rpx",

      },
      ab: {
        color: "#999999",
        border: "none"

      }
    }
  },
  onLoad() {
    this.show = true
  },
  methods: {
    toIndex() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    },

    cancel() {
      this.show = false
      console.log('cancel');
    },
    close() {
      this.show = false
      console.log('close');
    },

    cancel2() {
      this.show2 = false
      console.log('cancel');
    },
    close2() {
      this.show2 = false
      console.log('close');
    },
    showModal() {
      this.show = true;
    },
    confirm() {
      setTimeout(() => {
        // 3秒后自动关闭
        this.show = false;
      }, 3000)
    },
    // 删除图片
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1)
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file)
      let fileListLen = this[`fileList${event.name}`].length
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: 'uploading',
          message: '上传中'
        })
      })
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url)
        let item = this[`fileList${event.name}`][fileListLen]
        this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
          status: 'success',
          message: '',
          url: result
        }))
        fileListLen++
      }
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
          filePath: url,
          name: 'file',
          formData: {
            user: 'test'
          },
          success: (res) => {
            setTimeout(() => {
              resolve(res.data.data)
            }, 1000)
          }
        });
      })
    },
  }
}
</script>

<style lang="scss">
.aa1 {


  background-color: "white";
  border: 1rpx dotted #13D069;
  background-color: white;
  margin-bottom: 40rpx;
  margin-top: 40rpx;

  &-text {
    text-align: center;
    width: 80%;
    height: 200rpx;
    font-size: 17rpx;
    margin: 0 auto;
    color: #999999;
  }

;

  &-icon {
    &-icon1 {
      margin: 40rpx auto;
      width: 45rpx;
      height: 45rpx;

    }

    &-icon2 {
      margin: 40rpx auto;
      width: 45rpx;
      height: 45rpx;

    }
  }

}

.content {

  margin: 0 20rpx;
  padding: 60rpx 0;
}

.zuoce {
  margin-left: 50rpx;


}

.tytext {
  line-height: 67rpx;
  margin-left: 28rpx;
  font-size: 31rpx;
  font-weight: bold;

  .tl {
    color: #3D3D3D;

  }

  .tr {
    color: #13D069;
    margin-left: 20rpx;
  }
}

.box1 {
  margin-top: 17rpx;

  width: 100%;
  background-color: #CAFADC;
  border-radius: 14rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .box1top {


    height: 67rpx;
    border-radius: 14rpx;

  }

  .box1bottom {
    border: 1px solid #13D069;

    flex: 1;
    background-color: white;
    border-radius: 14rpx;

    .updatetp {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      .yc {
        flex: 1;
        display: flex;
        flex-direction: column;

        &-son {
          flex: 1;
        }
      }

      .tx {
        flex: 1;
        display: flex;
        flex-direction: column;
      }
    }
  }
}
</style>
